<template>
  <div class="fastlogin_page">
    <header>
      <span class="icon" @click="back">返回</span>
    </header>
    <main>
      <h3>手机号注册</h3>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            class="tel_input"
            v-model="state.username"
            name="用户名"
            label="用户名"
            placeholder="11位手机号"
            :rules="[
              { required: true, message: '请填写用户名' },
              { pattern, message: '请输入正确格式的手机号' },
            ]"
          />
          <van-field
            class="pas_input"
            v-model="state.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="6-18位数字、英文、特殊符号组合"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            class="pas_input"
            v-model="state.repass"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="6-18位数字、英文、特殊符号组合"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </main>
    <footer>
      <p>
        注册代表你同意<u style="text-decoration: underline">注册协议</u>和<u
          style="text-decoration: underline"
          >隐私政策</u
        >
      </p>
    </footer>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { Toast } from "vant";
import { submitRegisterApi } from "../../utils/api";
export default {
  setup() {
    const phone = ref("15770715354");
    //手机号格式验证
    const pattern =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    //手机重名检测
    const router = useRouter();
    const back = () => {
      router.push("/login");
    };
    const toRegister = () => {
      router.push("/register");
    };
    const state = reactive({
      username: "",
      password: "",
      repass: "",
    });
    //提交验证
    const onSubmit = () => {
      if (state.password === state.repass) {
        submitRegisterApi({ tel: state.username, password: state.password });
        Toast.loading({
          message: "跳转中...",
          forbidClick: true,
          loadingType: "spinner",
          duration: 300,
        });
        setTimeout(() => {
          router.push("/login");
        }, 320);
      } else {
        Toast("密码不一致，请重新输入");
      }
    };
    return {
      phone,
      back,
      toRegister,
      state,
      onSubmit,
      pattern,
    };
  },
};
</script>

<style lang="less" scoped>
.fastlogin_page {
  header {
    width: 100%;
    height: 90px;
    .icon {
      position: absolute;
      top: 44.5px;
      left: 18px;
      width: 60px;
      height: 17px;
      color: #68dcdc;
      font-size: 20px;
      font-weight: 600;
    }
  }
  main {
    width: 100%;
    height: 300px;
    h3 {
      color: #605e62;
      text-align: center;
      font-size: 26px;
      padding-top: 10px;
      margin-bottom: 50px;
    }
    .van-button {
      width: 300px;
      background: #68dcdc;
      border: none;
      border-radius: 5px;
      margin-left: 20px;
    }
    .link_div {
      display: flex;
      .link_sp {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        color: #504e52;
      }
    }
    .van-divider {
      margin-top: 150px;
      font-size: 18px;
      font-weight: 600;
    }
    .wechat_logo {
      img {
        display: block;
        margin: 0 auto;
        border: dashed #504e52;
      }
    }
  }
  footer {
    width: 100%;
    height: 420px;
    position: relative;
    p {
      width: 240px;
      color: #525153;
      font-size: 14px;
      font-weight: 600;
      position: absolute;
      bottom: 60px;
      left: 80px;
    }
  }
}
</style>
